<template>
  <div class="name">
    {{ detail.name }}
  </div>
</template>

<script>
import { onMounted, toRefs, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import axios from "axios";
export default {
  setup() {
    const state = reactive({
      detail: {},
      name: computed(() => {
        return store.state.musicHook.name;
      }),
    });
    const router = useRouter();
    const store = useStore();
    onMounted(() => {
      var { id } = router.currentRoute.value.params;
      axios
        .get(`http://122.112.161.135:3000/playlist/detail?id=${id}`)
        .then((res) => {
          state.detail = res.data.playlist;
        });
      //将文档title改为当前name
      console.log(store.state.musicHook.name);
      document.title = store.state.musicHook.name;
    });

    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>

<style>
.name {
  background: orangered;
  color: white;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}
</style>